www.luotao2008.cn视频网校，仅需要一个耳机+QQ远程即可完成所有教学任务。

题 目:从零学习Flash课件制作(11)

第十一节 按钮的制作与运用


在Flash的公用库中，给我们提供了一些现成的按钮，这些按钮在前面我们就用过。但公用库中的按钮毕竟数量较少，不可能满足我们的所有要求，所以在实际的课件制作中，更多的时候我们会自己制作一些有特色的按钮。
如果我们细心观察，会发现同一个按钮会有三种不同的状态。第一种状态叫弹起状态，也就是鼠标没有经过按钮时的状态。当鼠标经过按钮时，按钮会发生一些变化，以提醒操作者，因此第二种状态就叫做指针经过状态，也就是当鼠标经过这个按钮时按钮的状态。第三种状态叫按下状态，也就是我们点击按钮时按钮的状态。这三种状态都是我们能够看得到的状态，还有一种状态我们看不到，叫响应状态。响应状态是用来定义响应鼠标单击的区域，也就是定义当鼠标点击哪些地方时，按钮就响应鼠标的点击。这每一种状态都需要用一个帧来定义，所以，制作一个按钮元件，相当于制作一个有4个帧的影片剪辑。
现在我们首先来观察一下公用库中按钮的这4帧。新建Flash文件，选择菜单“窗口→公用库→按钮”打开公用库，打开库中文件夹“buttons bar capped”，将按钮“bar capped blue”拖一个到舞台上，再将舞台切换到此按钮上，可以看到其时间轴有4帧3个图层，和我们前面的时间轴不同，按钮的时间轴的前4帧都写出了帧的名称，而不是用数字，而且也比较宽，如图1-11-1所示。下面我们就来制作几个不同的按钮。

图1-11- 1

例1 制作仿windows标准按钮
本按钮我们模仿的是windows应用程序中的标准按钮，它的三种状态分别如图1-11-2所示。

图1-11- 2

图1-11- 3


制作步骤：
第一步，新建flash文件。
第二步，新建按钮元件。点击菜单“插入→新建元件”，打开“创建新元件”面板，在类型中选择“按钮”，在名称中填入“jx”，如图1-11-3，点击“确定”后舞台切换到按钮编辑窗口。
第三步，编辑“弹起”帧。正如前所述，按钮编辑窗口的时间线和影片剪辑的时间线是不同的。如图1-11-4，前4帧的名称分别对应着我们上面讲的按钮的4种状态。

图1-11- 4

图1-11- 5


用文字工具在舞台原点处输入按钮上要显示的文字“继续”，字体设为华文中宋，字号设为16，颜色为黑色。文本框的x值设为4.0，y值设为-1.3。
这时文字可能显得比较小，不方便操作，我们可以把舞台右上角的显示比例设为200％。
最后在时间轴的“点击”帧插入帧，锁定此图层。
第四步，编辑“指针经过”帧。
插入图层2，将图层2拖到图层1下面。在图层2的“指针经过”帧插入关键帧。
选择矩形工具，在属性面板中把笔触颜色设为黑色，笔触样式设为“极细”，填充颜色设为浅灰色，在舞台原点处绘制一个长50像素、宽25像素的长方形。再按住“shift”键选中长方形的左边线和上边线，将其颜色设置为白色，让按钮有凸出来的效果，如图1-11-1中间所示。
第六步，编辑“按下”帧。在“按下”帧插入关键帧，把长方形上边线和左边线设为黑色，下边线和右边线设置为白色，让按钮有被按下的效果，如图1-11-1右边所示。
第七步，在“点击”帧插入关键帧。我们前面说过，课件在运行时，“点击”帧是看不到的，它只是设定一下按钮响应的范围，因此只要在“点击”帧插入关键帧就行了。
这个按钮我们就制作完成了，时间轴设置如图1-11-5所示。
例2 特色按钮
下面要制作的是一个有自己特色的按钮。现在我们假设制作的是《圆的认识》课件，里面的按钮外形都是圆形，只有当鼠标移到某个按钮上时，才显示具体的按钮名称，如“复习”、“新授”等。下面是制作“复习”按钮的具体步骤。
制作步骤：
第一步，新建按钮元件，命名为“fx”。
第二步，在舞台原点处画一个直径40像素的紫色圆形。
第三步，在“指针经过”帧插入关键帧。用文本工具在圆的上面输入“复习”两个字，如图1-11-6所示。
第四步，在“按下”帧插入关键帧，把圆的颜色变成红色，把文字向下和向右分别移1像素。这样这个按钮就制作完成了，至于“点击”帧，插入关键帧可以，空着也一样。

图1-11- 6

例3 隐形按钮的制作
我们最后制作的按钮是一个隐形按钮，其制作方法非常简单，但用得比较多。所谓隐形按钮，就是看不到、却能够点击，也就是能响应鼠标的按钮。我们以前也用过隐形按钮，是通过把按钮的透明值设为零来实现的，按钮本身并不透明。而现在我们制作的按钮本身就是隐形的，不需要通过设置透明度来实现隐形。我们知道，按钮元件的最后一帧就是响应鼠标的帧，因此制作隐形按钮要让前面三帧都空着，只要在最后一帧设置内容即可。下面就是其制作方法。
新建按钮元件，在“点击”帧插入关键帧，画一个长方形，按钮就制作完成了。回到主场景，在库中把刚才制作的隐形按钮拖到舞台上，可以看到隐形按钮呈半透明的绿色，这是在编辑时的状态，而课件运行时隐形按钮是看不到的，需要使用者自己记住它的位置。
例4 自动评判的选择题
在最近热播的《喜羊羊与灰太狼》动画片中，每集末尾会有一个体育知识的小测验，题型是选择题，一般有3个答案。每当灰太狼选择了错误的答案后，总会出现受到惩罚的画面，选对了则会受到奖励，这种答题方式非常适合小学生的特点，在课件制作中是经常用到的，答对了，课件出示表示奖励的语音和画面，如“你真棒”、“你真聪明”等，答错了则出示“还需努力”、“你再想想”等。本例就是制作的这样一种可自动评判选择对错的选择题。
制作步骤：
第一步，新建Flash文件。
第二步，准备素材。在本例中，需要准备一段长约2秒的表示鼓励的音乐，比如掌声、好听的音乐等，音乐格式可以是wav或mp3。一段长约2秒的表示惋惜的声音。还要准备两张小的图片，一张表示鼓励，一张表示错误。如果没有图片，也可以手绘。
第三步，选择文字工具，在舞台适当位置输入题目和A、B、C三个答案，如图1-11-7。

图1-11- 7

第四步，制作一个隐形按钮元件。
选择菜单“插入→新建元件”，新建一个按钮元件，命名为“ying”，在“点击”帧插入关键帧，绘制一个边长30像素的正方形。
第五步，制作点击正确答案后播放的影片元件。
在本例中，答案A是正确的。那么本元件制作完成后应该覆盖在答案A上，当操作者点击答案A时本元件被点击，而且本元件被点击前应该是隐形的，被点击后才播放表示答案是正确的画面和声音。
选择菜单“插入→新建元件”，新建影片元件，元件名命为“zhengque”。打开元件库，把上一步制作的隐形按钮“ying”拖到第1帧舞台中央。选中隐形按钮，打开属性面板，将其实例名命为“ying_btn”。在第2帧单击右键，选择右键菜单“插入空白关键帧”，在第2帧插入空白关键帧，再选择菜单“文件→导入→导入到舞台”，导入表示鼓励的那幅图片，如果没有图片，可以自己用绘图工具绘制。
然后选择菜单“文件→导入→导入到舞台”，选择并导入准备好的表示鼓励的声音文件，然后在第25帧插入普通帧。声音导入成功后，时间轴如图1-11-8所示。选中第2帧，打开属性面板，在面板中的“同步”选项选择“事件”，如图1-11-9所示。关于课件中的声音处理，我们会在后面专门讲述，在本例中大家只要照着做即可。

图1-11- 8

图1-11- 9


最后插入新图层，选中新图层第1帧，打开动作面板，写入下面的语句：
stop();//播放头停止在第1帧
ying_btn.onRelease = function() {
play();//点击隐形按钮后播放
};
第六步，把舞台切换到场景1，打开元件库，把元件“zhengque”拖到答案A的“A”上面。由于元件“zhengque”第1帧是一个隐形按钮，所以被拖到舞台上后我们看到的是一个半透明的绿色正方形，如图1-11-10所示。但这只是编辑状态下，在影片运行时这个正方形是看不到的。

图1-11- 10

现在我们来想像一下影片的运行机制：影片运行后，出现题目和答案，元件“zhengque”也处在答案A的“A”上面，因执行语句“stop();”而停止在第1帧，第1帧的隐形按钮处于隐形状态，我们是看不到的。当我们点击答案A时，隐形按钮被点击，执行语句“play();”向后播放表示鼓励的声音和图片，播放完最后1帧后又返回第1帧执行语句“stop();”停止在第1帧，处于隐形状态。
下面我们要用相同的方法制作点击错误答案后要播放的影片，讲述得就相对简单一些。
第七步，新建影片“cuowu”，在库中把隐形按钮元件“ying”拖到影片第1帧舞台中央，在属性面板中将其命名为“ying_btn”。在第2帧插入空白关键帧，导入表示答案错误的图片和声音，再插入新图层，在第1帧动作面板写入与第五步中相同的语句。
第八步，把舞台切换回场景1，打开元件库，把刚制作的影片“cuowu”拖两个分别放到答案B和C上。
第九步，测试影片。
现在大家可以想一想，如果我们想增加这样一个功能：点击正确答案A后，题目括号中出现答案A，该怎样制作？
例5 填空题的制作方法
填空题是课件制作中经常要制作的内容。基本要求是：先出示题目，点击括号处出现答案。
制作步骤：
第一步，新建Flash文件。
第二步，选择工具箱中的文字工具，在舞台上输入下面的题目及答案，并在属性面板中将字的颜色设为黑色。
中国的首都是（北京）
第三步，选中文本，选择菜单“修改→分离”，将整个文本分离成单个的文本，如图1-11-11。

图1-11- 11

图1-11- 12


第四步，用鼠标在舞台空白处点击一下，让文本取消选中状态，再按住Shift键，分别点击文字“北”和“京”，选中答案，再选择菜单“修改→转换成元件”，在转换成元件面板中将元件命名为“答案”，类型为“影片剪辑”，如图1-11-12。
第五步，把舞台切换到元件“答案”。把舞台上的答案文本颜色变为红色。锁定图层1，新增图层2，在图层2第1帧用矩形工具绘制一个无边蓝色矩形，大小和图层1的答案差不多，刚好覆盖住答案。
第六步，选中刚绘制的矩形，选择菜单“修改→转换成元件”，在转换成元件面板中将元件命名为“隐形按钮”，类型为“按钮”。
第七步，把舞台切换到元件“隐形按钮”。用鼠标把“弹起”帧的关键帧拖到最后一帧“点击”帧，前面3帧都成为空白关键帧，时间轴如图1-11-13所示。

图1-11- 13

图1-11- 14


第八步，把舞台切回到元件“答案”，可以看到，第五步绘制的长方形已经转换成半透明的隐形按钮了。选中此按钮，展开属性面板，将此按钮的实例名命为“yx_btn”。
第九步，选中图层1第1帧，用鼠标将第1帧拖到第2帧，此时时间轴如图1-11-14所示。
第十步，选中图层1第1帧，展开动作面板，输入下面的语句：
stop();//停止在第1帧
yx_btn.onRelease = function() {
gotoAndStop(2);//点击隐形按钮后跳转到第2帧
};
第十一步，切换回主场景，测试影片。
在本例中，对于答案元件，我们不是单独制作的，而是在输入题目时就把答案输入了进去，再把答案单独选择出来转换成元件。这样做的好处是可以保持答案与题目风格上的一至，特别是排版问题，可以使答案的空格大小刚好符合要求，而不至于太大或太小。
大家可以想一想，我们如果增加这样一个要求：点击括号后出现答案，再点击则答案消失，然后点击答案又出现。该怎样制作？

FLASH课件制作培训班开班了！火热报名中!加我站管理QQ444860709解决任何疑问！ 培训QQ专业群67042004。